<template>
  <footer>
    <router-link
      v-for="item in footerList"
      :key="item.url"
      :to="'/home' + item.url"
    >
      {{ item.title }}
    </router-link>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      footerList: [
        {
          title: "电影/影院",
          url: "/movies",
        },
        {
          title: "视频",
          url: "/videos",
        },
        {
          title: "小视频",
          url: "/minis",
        },
        {
          title: "演出",
          url: "/show",
        },
        {
          title: "我的",
          url: "/mine",
        },
      ],
    };
  },
};
</script>

<style scoped>
footer {
  width: 100%;
  height: 50px;
  background-color: lightblue;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
}
a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.router-link-active {
  color: red;
}
</style>
